<template>
	<view class="math-formula-item">
		
		<view class="formula-item" v-for="(item, index) in list" :key="index">
			<view class="item" v-for="(formula, i) in item.formula" :key="i">
				<view v-if="formula === null" class="placeholder"></view>
				<text v-else>{{ formula }}</text>
			</view>
		</view>
	</view>
	
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
	data: {
		type: Object,
		default: () => ({})
	},
})
const list = computed(() => {
	console.log('props.data', props.data)
	return props.data
})
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.math-formula-item {
	display: flex;
	flex-wrap: wrap;
	.formula-item {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2.5rem 0;
		font-family: "Alimama";
	}
	
	.order-number {
		color: $gray-ligh-4;
		font-size: 1.2rem;
		line-height: 1;
		padding-right: 0.6rem;
		font-family: "Alimama";
	}
	.item {
		text-align: center;
		padding: 0 0.3rem;
	}
	text {
		font-family: "Alimama";
		font-size: 1.5rem;
		line-height: 1;
		font-weight: bold;
	}
	.placeholder {
		width: 100%;
		text-align: center;
		border: 0.2rem solid $gray-ligh-4;
		border-radius: 0.4rem;
		height: 2.4rem;
		width: 3.5rem;
		box-sizing: border-box;
		font-size: 1.5rem;
		font-family: "Alimama";
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		overflow: hidden;
		background-color: #fff;
	}
	.math-formula-result {
		margin-left: 0.4rem;
		font-size: 1.4rem;
	}
}
</style>